<template>
  <template v-if="isEditable">
    <GdTagEditable v-model="value" v-bind="$attrs"></GdTagEditable>
  </template>
  <template v-else>
    <el-tag v-bind="$attrs">
      <template
        v-for="(slotVal, slotName, index) in $slots"
        :key="slotName"
        #[slotName]
      >
        <slot :name="slotName"></slot>
      </template>
    </el-tag>
  </template>
</template>
<script setup>
import { computed } from "vue";
import GdTagEditable from "./components/gd-tag-editable";
const props = defineProps({
  modelValue: {
    type: [String, Number, Boolean, Object, Array],
  },
});
const isEditable = computed(() => {
  return Array.isArray(props.modelValue);
});
const emits = defineEmits(["update:modelValue"]);
const value = computed({
  get: () => {
    return props.modelValue;
  },
  set: (value) => {
    emits("update:modelValue", value);
  },
});
</script>
